<template>
    <div class="transition">
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!-- 用在v-if/v-show切换,router-view -->
        <transition name="my">
            <div class="box" v-if="isShow">

            </div>
        </transition>
        <button @click="showConfirm=true">删除</button>
        <confirm-box msg="确认删除吗？" :show="showConfirm" @cancel="showConfirm=false" />
    </div>
</template>

<script>
    export default {
        data(){
            return {
                isShow:false,
                showConfirm:false
            }
        }
    }
</script>

<style lang="sass" scoped>
.transition 
    .box
        width: 500px
        height:500px
        background: linear-gradient(#e66465,#9198e5)
    .my-enter
        opacity: 0
        transform: scale(.2) translateX(-100%)
    .my-enter-active
        transition: 10s
    .my-leave-to
        transform: translateY(200px)
        opacity: 0
    .my-leave-active
        transition: 5s
</style>